<template>
    <div class="card-box">
        <!-- 列表 -->
        <div class="card-list">
            <router-link
                :to="{ name: 'ArticleDetail', query: { id: item.id } }"
                class="card-item"
                v-for="item in list"
                :key="item.id"
            >
                <div class="card-inner">
                    <div class="card-cover">
                        <img
                            class="card-img"
                            :src="item.image_url"
                            :alt="item.title"
                            object-fit="cover"
                            object-position="50%"
                        />
                    </div>
                    <div class="card-star">
                        <div class="star">{{ item.category_title }}</div>
                    </div>
                    <div class="card-info">
                        <div class="card-info_hd">
                            <div class="card-title">{{ item.title }}</div>
                            <div class="card-browse">{{ item.click }} 浏览</div>
                        </div>
                        <div class="card-info_bd">
                            <div class="card-desc">{{ item.summary }}</div>
                        </div>
                        <div class="card-info_ft">
                            <div class="crad-time">{{ formatTime(item.created_time) }}</div>
                            <div class="card-tags">
                                <span v-for="v in item.tag_name" :key="v">{{ v }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </router-link>
        </div>
        <div class="card-copyright">Copyright ©2022 闲云野鹤 粤ICP备*******号</div>
    </div>
</template>

<script>
import { getCurrentInstance, ref, toRefs, reactive } from 'vue';
import HomeService from '@/global/service/homeService.js';

export default {
    setup() {
        const { proxy } = getCurrentInstance();
        let table = reactive({
            loading: false,
            rowId: 0,
            list: [],
            currentPage: proxy.$config.pagination.currentPage, // 默认页
            pageSize: proxy.$config.pagination.pageSize, // 每页多少条
            pageSizes: proxy.$config.pagination.pageSizes, // 每页显示个数下拉选择器的选项设置
            layout: proxy.$config.pagination.layout, // 组件布局，子组件名用逗号分隔
            total: 0 // 总条数
        });
        // 时间格式化
        const formatTime = (value) => {
            return proxy.$formatTime(value);
        };

        const getList = async () => {
            const { code, data } = await HomeService.articleList({
                support: 1
            });
            if (code === 200) {
                table.list = data.list;
            }
        };

        getList();

        return {
            ...toRefs(table),
            formatTime
        };
    }
};
</script>

<style lang="less">
&::-webkit-scrollbar {
    width: 10px;
    height: 6px;
    background: transparent;
}

&::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 4px;
}

&:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.4);
}

&:hover::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}
.card-box {
    height: 100%;
    position: relative;

    .card-list {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        display: grid;
        width: 98%;
        height: 85%;
        grid-gap: 20px;
        grid-auto-flow: row;
        overflow: auto;

        .card-item {
            position: relative;
        }
    }
    @media (min-width: 800px) {
        .card-list {
            grid-template-rows: repeat(3, 1fr);
            grid-template-columns: repeat(3, 1fr);
        }
    }
    @media (max-width: 800px) {
        .card-list {
            grid-template-rows: repeat(1, 1fr);
            grid-template-columns: repeat(1, 1fr);
            padding-left: 10px;
        }
    }
}

.card-copyright {
    width: 100%;
    position: absolute;
    bottom: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.9);
    line-height: 30px;
}
</style>
